<template>
    <!--作者详情-->
    <div class="book-info-author" v-if="author_book">
        <div class="book-info-author-desc">
            <span class="i-font-color"></span>
            <span>关于作者 ： {{author_book[0]['author']['pen_name']}}</span>
        </div>
        <div class="book-info-author-book-list">

            <a href="" v-for="item in author_book" :key="item.id">
                <img :src="item.cover" alt="">
                <span>{{item.name}}</span>
            </a>

        </div>
    </div>
</template>

<script>
    export default {
        name: "author",
        props:{
            author_book:null
        }
    }
</script>

<style scoped>
    .book-info-author{
        margin-top: 0.8rem;
        background-color: white;
        display: flex;
        flex-flow: column nowrap;
        /*justify-content: flex-start;*/
        /*align-items: self-start;*/
    }
    .book-info-author-desc{
        margin: 0.8rem 0;
        display: flex;
    }
    .book-info-author-desc>i{
        margin-left: 0.8rem;
    }
    .book-info-author-desc>span{
        margin-left: 1.2rem;
        font-size: 1.1rem;
        font-weight: bold;
    }
    .book-info-author-book-list{
        display: flex;
        flex-flow: column nowrap;
        margin-top: 0.8rem;
    }
    .book-info-author-book-list > a{
        height: 3rem;
        display: flex;
        align-items: center;
        margin-left: 1.7rem;
    }
    .book-info-author-book-list > a > img{
        width:3rem;
        height:3rem;
        border-radius: 50%;
        overflow:hidden
    }
    .book-info-author-book-list > a > span{
        margin-left: 1.2rem;
    }
</style>